<template>
	<view class="content">
		<view class="top">
			<view class="AvatarAndNickname">
				<view class="header_left">
					<view class="Avatar">
						<image :src="'http://cdn.gdxywsw.club/' + userInfo.avatar"></image>
					</view>

					<view class="NicknameAndUid">
						<view class="NicknameAndGender">
							<view class="Nickname" :style="{fontSize:userInfo.nickname.length>4?'15px':'18px'}">
								{{ userInfo.nickname }}
							</view>
							<view class="Gender">
								<image v-if="userInfo.gender=='男'" src="../../static/images/man.png"></image>
								<image v-else src="../../static/images/female.png"></image>
							</view>
						</view>
						<view class="Uid">uid: {{userInfo.uid }}</view>
						<view class="role">
							<!-- <uni-tag v-for="item in rolesList" :key="index" :inverted="true" :text="item" type="warning"
								size="mini" /> -->
							<uni-tag :key="index" :inverted="true" :text="rolesList" type="warning" size="mini" />
						</view>
					</view>
				</view>
				<view class="header_right">
					<button v-if="isAdmin" type="default" style="background-color: #f3a73f;color: white;" size="mini"
						@click="toManage">管理系统</button>
					<button type="default" size="mini" style="margin-left: 2px;" @click="dialogToggle">退出登录</button>
				</view>
			</view>
		</view>
		<view class="userInfoContent">
			<othersInfo :propUid="userInfo.uid" :otherInfo="userInfo"></othersInfo>
		</view>

		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="error" cancelText="关闭" confirmText="确定" title="退出登录" content="是否退出登录"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>

</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				rolesList: ''
			};
		},
		computed: {
			...mapState('my_Info', ['userInfo']),
			isAdmin() {

				if (this.rolesList == '管理员') {
					return true
				} else if (this.rolesList == '超级管理员') {
					return true
				} else {
					return false
				}
			}
		},
		onShow() {
			this.getMyInfo()
		},
		mounted() {
			// console.log(this.$children, 444);
			this.getUserRoles()
		},
		methods: {
			...mapMutations('my_Info', ['setUserInfo']),

			// 管理用户
			toManage() {
				uni.navigateTo({
					url: `/subpkg/systemManage/systemManage?myRole=` + this.rolesList
				})
			},
			dialogToggle() {
				this.$refs.alertDialog.open()
			},
			logout() {
				uni.removeStorageSync('userInfo')
				uni.setStorageSync('autoLogin', JSON.stringify(false))
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			dialogConfirm() {
				this.logout()
			},
			dialogClose() {
				console.log('点击关闭');
			},
			// 返回用户角色
			async getUserRoles(cb) {
				let {
					data: res
				} = await uni.$http.get('/admins/getUserRoleName/' + this.userInfo.uid)
				cb && cb()
				if (res.code == 2000) {
					this.rolesList = res.data
				} else {
					uni.showToast({
						title: '加载权限出错',
						duration: 1500,
						icon: 'error'
					})
				}
			},
			async getMyInfo(cb) {
				let {
					data: res
				} = await uni.$http.get('/users/getDetail/' + this.userInfo.uid)

				cb && cb()
				if (res.code == 2000) {
					// this.othersInfo = res.data
					this.setUserInfo(res.data)
				} else {
					uni.showToast({
						title: '数据出错',
						duration: 1500,
						icon: "none"
					})
				}
			},
		},

		onPullDownRefresh() {
			console.log(this.$children);
			this.$children[1].refresh()
			this.getMyInfo(() => uni.stopPullDownRefresh())
			this.getUserRoles(() => uni.stopPullDownRefresh())
		},

		onReachBottom() {
			let {
				isloading,
				getPublicMsgsList,
				checked,
				getLikeMsgsList
			} = this.$children[0]
			console.log(checked, '7');
			switch (checked) {
				case 0:
					if (isloading) return
					getPublicMsgsList()
					break
				case 1:
					if (isloading) return
					getLikeMsgsList()
					break
				case 2:
					if (isloading) return
					this.getSpitMessages()
					break
				case 3:
					if (isloading) return
					this.getAnnouncementMessages()
					break
				case 4:
					if (isloading) return
					this.getLostAndFoundMessages()
					break
			}
		}
	}
</script>

<style lang="less">
	.content {
		.top {
			padding: 10px;
		}

		.AvatarAndNickname {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.header_left {
				display: flex;

				.Avatar image {
					width: 75px;
					height: 75px;
					object-fit: cover;
					border-radius: 50%;
					border: 3px solid rgb(247, 247, 249);
				}

				.NicknameAndUid {
					margin-top: 20px;
					margin-left: 5px;

					.NicknameAndGender {
						display: flex;
					}

					.Nickname {
						font-weight: bolder;
						font-size: 20px;
					}

					.Gender {
						margin-left: 10px;
						margin-top: 2px;
					}

					.Gender>image {
						width: 20px;
						height: 20px;
					}
				}
			}


			.header_right {
				display: flex;

				/deep/ button {
					padding: 0 10px;
				}
			}
		}

		.role {
			position: absolute;

		}

		.uni-tag {
			margin: 0 2px;
		}

	}
</style>
